<template>
    <div class="about">
      <el-select
        v-model="checkedNodes"
        placeholder="请选择..."
        clearable
        :multiple="multiple"
        ref="select"
        :style="`width: ${inputWidth}`"
      >
        <el-input
          v-if="isFilter"
          class="input"
          placeholder="此处键入'关键词'搜索查询"
          prefix-icon="el-icon-search"
          v-model="treeFilter"
          size="small"
          clearable
        ></el-input>
        <el-option hidden key="id" :value="checkedNodes" :label="selectName"></el-option>
        <el-tree
          :data="treeData"
          :props="defaultProps"
          :check-strictly="true"
          @node-click="handleNodeClick"
          :expand-on-click-node="false"
          :check-on-click-node="true"
          :show-checkbox="showCheckbox"
          @check-change="handleCheckChange"
          @check="handleCheck"
          ref="treeRef"
          node-key="id"
          :default-expand-all="true"
          :filter-node-method="filterNode"
        >
            <template #default="{ data }">
                <span>{{ data.payload.orgCname }}</span>
                <el-tag
                    size="small"
                    style="margin: 0 10px"
                    v-show="filterorgType(data.tag)"
                >{{ filterorgType(data.tag) }}</el-tag>
            </template>
        </el-tree>
      </el-select>
    </div>
  </template>
  
  <script>
  import { ref, watch,onMounted} from 'vue';
  import { apiGetDeptTree } from '@/api/user'
  import { ElTree } from 'element-plus'
  export default {
    name: 'ElSelectTree',
    emits: ['select-data'],
    props: {
      showCheckbox: {
        type: Boolean,
        default: false,
      },
      inputWidth:{
        type: String,
        default: '300px',
      },
      isFilter:{
        type: Boolean,
        default: true,
      },
      multiple:{
        type: Boolean,
        default: true,
      }
    },
    
    setup(props,{emit}) {
      const selectName = ref('');
      const treeFilter = ref('');
      const treeData = ref([]);
      const getTreeList = async() => {
        const {data} = await apiGetDeptTree()
        if(data.success){
            treeData.value = data.data.subNodes
        }
        // console.log(toRaw(treeData.value),'treeData')
    }
    const defaultProps = {
        children:'subNodes',
            label: (data) => data.payload.orgCname
        }
    // const defaultProps = {
    //   children: 'children',
    //   label: 'label',
    // };
  
      const tagList = [
        { value: 'wife', label: '老婆' },
        { value: 'princess', label: '小公主' },
        { value: 'yyds', label: '天下第一' },
      ];
  
      const handleNodeClick = (data) => {
        console.log(data,'data')
        // selectVal.value = data.payload.orgId;
        selectName.value = data.payload.orgCname;
        treeFilter.value = '';
        if (refs.select && refs.select.blur) {
          refs.select.blur();
        }
        emit('select-data',checkedNodes,selectName)
      };
  
      const filterNode = (value, data) => {
        if (!value) return true;
        return data.label.includes(value);
      };
  
      const filterorgType = (val) => {
        const tag = tagList.find((item) => item.value === val);
        return tag ? tag.label : '';
      };
      const handleCheckChange = (v1,v2,v3) =>{
        console.log(v1,v2,v3)
      }
      const checkedNodes = ref([]);
      const treeRef = ref(null);

      const handleCheck = () => {
        let arr = treeRef.value.getCheckedNodes();
        let obj = {}
        checkedNodes.value = []
        for(let i of arr){
          obj = {
            value: i.payload.orgId,
            label: i.payload.orgCname,
          }
          
          checkedNodes.value.push(obj)
        }
        console.log(checkedNodes,'checkedNodes')
        emit('select-node',checkedNodes.value)
      };
  
      watch(treeFilter, (val) => {
        if (refs.tree && refs.tree.filter) {
          refs.tree.filter(val);
        }
      });
  
      const refs = {
        select: ref(null),
        tree: ref(null),
      };
      onMounted(()=>{
        getTreeList()
      })
  
      return {
        treeRef,
        handleCheckChange,
        handleCheck,
        selectName,
        treeFilter,
        treeData,
        defaultProps,
        tagList,
        handleNodeClick,
        filterNode,
        filterorgType,
        refs,
        getTreeList,
        checkedNodes
      };
    },
  };
  </script>
  
  <style scoped>
  .input {
    width: 260px;
    margin: 10px;
  }
  </style>